<template>
	<view class="app">
		<view v-if="isDialogVisible" class="mask" @click="hideDialog"></view>

		<!-- <view class="dialog"> -->
		<image v-if="isDialogVisible" class="dialogImage" :src="imgUrl" mode="aspectFill" @longtap="upImg(imgUrl)">
		</image>
		<!-- <view class="content">
				<view class="head">
					<image :src="user.headimg" mode="aspectFill"></image>
				</view>
				<view class="name">
					<text>{{user.name}}</text>
					<view class="sign">
						Hey bro，我在镇北盲盒，一起来玩吖
					</view>
				</view>
				<view class="ewm">
				</view>
			</view> -->
		<!-- </view> -->
		<!-- 	<view @click="hideDialog" class="close">
			<image src="../../../static/center/return.png" mode="aspectFill"></image>
		</view> -->
	</view>
</template>

<script>
	import {
		BASE_URL
	} from "@/config/index.js";
	import {
		$getStorage,
		$setStorage,
		$removeStorage
	} from "@/utils/auth.js";
	export default {
		data() {
			return {
				isDialogVisible: false,
				imgUrl: ""
			};
		},
		props: ["user", "dialogVisible"],
		computed: {
			dialogVisibility() {
				return this.dialogVisible
			}
		},
		created() {
			if (this.dialogVisible) {
				this.isDialogVisible = true;
				this.showDialog();
			}
		},
		methods: {
			showDialog() {
				uni.showLoading({
					title: '正在生成图片中'
				});
				let url =
					BASE_URL + '/invite-records/merge-images?url=http://8.142.124.111:8899?invite_code='; // 获取图形验证码接口地址
				uni.request({
					url: url + encodeURIComponent(this.user.inviteCode),
					method: 'GET',
					// responseType: 'arraybuffer',
					header: {
						"Authorization": $getStorage('token') || ""
					},
					success: res => {

						if (res.data.code == 200) {
							uni.hideLoading();
							this.imgUrl = res.data.message
						}

						// console.log(res.data);
						// let data = res.data
						// this.imageBase64 = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((
						// 	data,
						// 	byte) => data + String.fromCharCode(byte), ''));
						// console.log(this.imageBase64);
						// if (this.imageBase64) {
						// console.log(this.imgUrl)
						// uni.previewImage({
						// 	current: this.imageBase64,
						// 	urls: [this.imageBase64]
						// });
						// }


					},
				});
			},
			hideDialog() {
				this.isDialogVisible = false;
				this.$emit("close");
			},
			upImg(imgUrl) {
				uni.downloadFile({
					url: imgUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										duration: 2000
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						} else {
							uni.showToast({
								title: "下载失败，请稍后重试",
								icon: "none"
							});
						}
					},
					fail: function() {
						uni.showToast({
							title: "下载失败，请稍后重试",
							icon: "none"
						});
					}
				});
			}
		}
	};
</script>

<style>
	.app {
		position: relative;
		width: 100%;
		/* height: 100vh; */
	}

	.button {
		width: 100%;
		height: 120rpx;
		text-align: right;
		line-height: 120rpx;
	}

	.button image {
		width: 50rpx;
		height: 50rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明黑色遮罩层 */
		z-index: 998;
		/* 比弹框的z-index小 */
	}

	.dialogImage {
		position: fixed;
		width: 85%;
		height: 880rpx;
		border-radius: 50rpx;
		/* background: url("../../../static/center/back.png") no-repeat;
		background-size: cover; */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* background-color: white; */
		/* padding: 20rpx; */
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
		z-index: 999;
		/* opacity: 1; */
	}

	.close {
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		margin-top: 190rpx;
	}

	.close image {
		width: 50rpx;
		height: 50rpx;
	}

	.content {
		position: relative;
		z-index: 1000;
		/* 确保内容层在遮罩层上方 */
	}

	.head {
		width: 100%;
		height: 130rpx;
		text-align: center;
	}

	.head>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: black;
		margin-top: -100rpx;
	}

	.name {
		width: 100%;
		height: 160rpx;
		text-align: center;
		color: #fff;
	}

	.name text {
		font-size: 60rpx;
		letter-spacing: 5rpx;
	}

	.sign {
		color: white;
		margin-top: 20rpx;
	}

	.ewm {
		width: 100%;
		height: 400rpx;
		text-align: center;
	}

	.ewm image {
		width: 500rpx;
		height: 500rpx;
	}
</style>